import { EVENT_PANEL_CONTENT, EVENT_ASSET_RELOAD } from "../../compute/events";
import { ZRenderComp } from '../../../common/component/zrComp';
import { calc, cubicIn, cubicOut, quinticIn, quinticOut } from '../../../common/animation';
import { layouts, color, assets } from "./layout";

/**
 * 中间那个 icon 以及下面记分板部分
 */

class Avatar extends ZRenderComp {
	layout = layouts.avatar;

	constructor(args) {
		super(args.parent, args.zrender);
		this.useExistZRenderInstance(args.zr, this.layout.x, this.layout.y);

		this.on(EVENT_PANEL_CONTENT, this.onPanelContent.bind(this));
		this.on(EVENT_ASSET_RELOAD, this.onAssetReload.bind(this));
	}

	init() {
		const { layout } = this;
		const context = this.root.context;
		const bp = this.root.banPick;

		const iconLayout = layout.icon;
		this.spIcon = this.createImage(context.assetPath(assets.s11_icon))
			.position(iconLayout.x, iconLayout.y)
			.z(0, 5)
			.build();
		// PATCH 11.19
		this.spTxPatch = this.createText(bp.patch, 24)
			.position(layout.txPatch.x, layout.txPatch.ySrc)
			.textStyle('center', 'bottom', 'bold', 'Arial')
			.textFill(color.title)
			.z(0, 6)
			.build();
		this.spTeamLeft = this.createText(bp.teamLName, 54)
			.position(layout.teamLeft.xDst, layout.teamLeft.y)
			.textStyle('right', 'bottom', 700, 'Arial', 'italic')
			.textFill(color.left)
			.z(0, 6)
			.build();
		this.spTeamLeft.hide();
		this.spTeamRight = this.createText(bp.teamRName, 54)
			.position(layout.teamRight.xDst, layout.teamRight.y)
			.textStyle('left', 'bottom', 700, 'Arial', 'italic')
			.textFill(color.right)
			.z(0, 6)
			.build();
		this.spTeamRight.hide();
		this.spScoreLeft = this.createText(bp.teamLScore, 24)
			.position(layout.scoreLeft.xDst, layout.scoreLeft.y)
			.textStyle('right', 'bottom', 700, 'Arial')
			.textFill(color.sub)
			.z(0, 6)
			.build();
		this.spScoreLeft.hide();
		this.spScoreRight = this.createText(bp.teamRScore, 24)
			.position(layout.scoreLeft.xDst, layout.scoreLeft.y)
			.textStyle('left', 'bottom', 700, 'Arial')
			.textFill(color.sub)
			.z(0, 6)
			.build();
		this.spScoreRight.hide();
		this.spArrowLeft = this.createPolygon(
				[layout.arrowLeft.width, 0],
				[layout.arrowLeft.width, layout.arrowLeft.height],
				[0, layout.arrowLeft.height / 2],
			)
			.fill(color.left)
			.position(layout.arrowLeft.xDst, layout.arrowLeft.y)
			.z(0, 6)
			.build();
		this.spArrowLeft.hide();
		this.spArrowRight = this.createPolygon(
				[0, 0],
				[0, layout.arrowRight.height],
				[layout.arrowRight.width, layout.arrowRight.height / 2],
			)
			.fill(color.right)
			.position(layout.arrowRight.xDst, layout.arrowRight.y)
			.z(0, 6)
			.build();
		this.spArrowRight.hide();
	}

	tick(now) {
		super.tick(now);

		const selecting = this.root.banPick.seatArrow;
		const left = selecting.filter(s => s[1] == 'L').length;
		const right = selecting.filter(s => s[1] == 'R').length;
		if (left > right) {
			this.spArrowLeft.attr({ style : {opacity : 1} });
			this.spArrowRight.attr({ style : {opacity : 0} });
		} else if (left < right) {
			this.spArrowLeft.attr({ style : {opacity : 0} });
			this.spArrowRight.attr({ style : {opacity : 1} });
		}
	}

	onPanelContent(_, param) {
		if (param.content === 'patch') {
			this.onHide();
			return;
		}
		if (param.content === 'battle') {
			this.onShow();
		}
	}

	onShow() {
		const { layout } = this;
		this.clearAnimations();
		this.createAnimation('anim-1')
			.whenUpdated(p => this.spTxPatch.moveTo(undefined, p.value))
			.update()
			.when(0, layout.txPatch.ySrc)
			.when(400, layout.txPatch.yDst).easing(quinticIn)
			.commit();
		this.createAnimation('anim-2')
			.whenUpdated(p => {
				this.spTeamLeft.moveTo(calc(layout.teamLeft.xSrc, layout.teamLeft.xDst, p.value));
				this.spScoreLeft.moveTo(calc(layout.scoreLeft.xSrc, layout.scoreLeft.xDst, p.value));
				this.spArrowLeft.moveTo(calc(layout.arrowLeft.xSrc, layout.arrowLeft.xDst, p.value));
	
				this.spTeamRight.moveTo(calc(layout.teamRight.xSrc, layout.teamRight.xDst, p.value));
				this.spScoreRight.moveTo(calc(layout.scoreRight.xSrc, layout.scoreRight.xDst, p.value));
				this.spArrowRight.moveTo(calc(layout.arrowRight.xSrc, layout.arrowRight.xDst, p.value));
			})
			.update()
			.when(400, 0).callback(() => {
				this.spTeamLeft.show();
				this.spScoreLeft.show();
				this.spArrowLeft.show();
				this.spTeamRight.show();
				this.spScoreRight.show();
				this.spArrowRight.show();
			})
			.when(800, 1).easing(cubicOut)
			.commit();

		this.spTeamLeft.hide();
		this.spScoreLeft.hide();
		this.spArrowLeft.hide();
		this.spTeamRight.hide();
		this.spScoreRight.hide();
		this.spArrowRight.hide();

		// const [x, y] = this.absolutePos();

		// const animation2 = animation < 0.5 ? 0 : animation * 2 - 1;

		// const teamLX = x + calc(layout.teamLeft.xSrc, layout.teamLeft.xDst, animation2, cubicOut);
		// this.spTeamLeft.attr({
		// 	style: { opacity: animation == 0 ? 0 : 1 },
		// 	position: [teamLX, y + layout.teamLeft.y]
		// });
		// const scoreLX = x + calc(layout.scoreLeft.xSrc, layout.scoreLeft.xDst, animation2, cubicOut);
		// this.spScoreLeft.attr({
		// 	style: { opacity: animation == 0 ? 0 : 1 },
		// 	position: [scoreLX, y + layout.scoreLeft.y]
		// });
		// const arrowLX = x + calc(layout.arrowLeft.xSrc, layout.arrowLeft.xDst, animation2, cubicOut);
		// this.spArrowLeft.attr({
		// 	style: { opacity: animation == 0 ? 0 : 1 },
		// 	position: [arrowLX, y + layout.arrowLeft.y]
		// });

		// const teamRX = x + calc(layout.teamRight.xSrc, layout.teamRight.xDst, animation2, cubicOut);
		// this.spTeamRight.attr({
		// 	style: { opacity: animation == 0 ? 0 : 1 },
		// 	position: [teamRX, y + layout.teamRight.y]
		// });
		// const scoreRX = x + calc(layout.scoreRight.xSrc, layout.scoreRight.xDst, animation2, cubicOut);
		// this.spScoreRight.attr({
		// 	style: { opacity: animation == 0 ? 0 : 1 },
		// 	position: [scoreRX, y + layout.scoreRight.y]
		// });
		// const arrowRX = x + calc(layout.arrowRight.xSrc, layout.arrowRight.xDst, animation2, cubicOut);
		// this.spArrowRight.attr({
		// 	style: { opacity: animation == 0 ? 0 : 1 },
		// 	position: [arrowRX, y + layout.arrowRight.y]
		// });
	}

	onHide() {
		const { layout } = this;
		this.clearAnimations();
		this.createAnimation('anim-1')
			.whenUpdated(p => this.spTxPatch.moveTo(undefined, p.value))
			.update()
			.when(400, layout.txPatch.ySrc)
			.when(800, layout.txPatch.yDst).easing(quinticOut)
			.commit();

		this.createAnimation('anim-2')
			.whenUpdated(p => {
				this.spTeamLeft.moveTo(calc(layout.teamLeft.xSrc, layout.teamLeft.xDst, p.value));
				this.spScoreLeft.moveTo(calc(layout.scoreLeft.xSrc, layout.scoreLeft.xDst, p.value));
				this.spArrowLeft.moveTo(calc(layout.arrowLeft.xSrc, layout.arrowLeft.xDst, p.value));
	
				this.spTeamRight.moveTo(calc(layout.teamRight.xSrc, layout.teamRight.xDst, p.value));
				this.spScoreRight.moveTo(calc(layout.scoreRight.xSrc, layout.scoreRight.xDst, p.value));
				this.spArrowRight.moveTo(calc(layout.arrowRight.xSrc, layout.arrowRight.xDst, p.value));
			})
			.update()
			.when(0, 1)
			.when(400, 0).easing(cubicIn).callback(() => {
				this.spTeamLeft.hide();
				this.spScoreLeft.hide();
				this.spArrowLeft.hide();
				this.spTeamRight.hide();
				this.spScoreRight.hide();
				this.spArrowRight.hide();
			})
			.commit();

		this.spTeamLeft.show();
		this.spScoreLeft.show();
		this.spArrowLeft.show();
		this.spTeamRight.show();
		this.spScoreRight.show();
		this.spArrowRight.show();
	}

	onAssetReload() {
		const bp = this.root.banPick;
		this.spTxPatch.attr({ style: { text: bp.patch }});
		this.spTeamLeft.attr({ style: { text: bp.teamLName }});
		this.spTeamRight.attr({ style: { text: bp.teamRName }});
		this.spScoreLeft.attr({ style: { text: bp.teamLScore }});
		this.spScoreRight.attr({ style: { text: bp.teamRScore }});
	}
}

export {
	Avatar
};
